<template>
  <div id = building
  style="width :100%; height: 100vh ;background-color: dodgerblue;overflow: hidden" >
    <div style = "width: 400px; margin : 150px auto">
      <div style ="color: lightgoldenrodyellow;font-size:50px; text-align: center ;padding:30px 0">欢迎注册</div>
      <el-form :model="form" size = "normal" :rules="rules" ref="form">

        <el-form-item prop="user_id" >
          <el-input  :prefix-icon="User"  v-model="form.user_id" />
        </el-form-item>

        <el-form-item prop="user_password">
          <el-input :prefix-icon="Lock"  v-model="form.user_password" show-password />
        </el-form-item>

        <el-form-item prop="confirm">
          <el-input :prefix-icon="Lock"   v-model="form.confirm" show-password />
        </el-form-item>

        <el-form-item >
          <el-button style="width:100% " type ="primary" @click= "register">注册</el-button>
        </el-form-item>

      </el-form>

    </div>
  </div>

</template>

<script >
import {Lock, Search, User} from "@element-plus/icons-vue";
import request from "@/utils/request";
import {ref} from "vue";

export default{
  name: "Register",
  components: {},
  computed: {
    Lock() {
      return Lock
    },
    User() {
      return User
    },

  },
  data(){
    return{
      form:{},
      rules:{
        user_id :[
    { required : true , message : '请输入学生ID',trigger :'blur'},
        ],
       user_password:[
           {
             required: true ,message :'请输入密码',trigger :'blur'},
       ],
        confirm:[
          {
            required: true ,message :'请确认密码',trigger :'blur'},
        ],

      }
    }
  },

//注册
  methods:{
    register()
    {
      if (this.form.user_password !== this.form.confirm){
        this.$message({
          type:"error",
          message:'两次密码输入不一致!'
        })
        return
      }

      this.$refs['form'].validate((valid) => {
        if(valid) {
          request.post("/user/register", this.form).then(res => {
            if (res.code === '100') {
              this.$message({
                type: "success",
                message: "注册成功"
              })
              this.$router.push("/login")    //跳转页面
            } else {
              this.$message({
                type: "error",
                message: res.msg
              })

            }

          })
        }

      })
    }
  }}




</script>


<style scoped>



#building{
  background:url("@/assets/2.jpg");
  width:100%;
  height:100%;
  position:fixed;
  opacity: 0.75;
  background-size:100% 100%}



</style>